from dash import html, dcc
import feffery_antd_components as fac

# 回调辅助用store层
stores = html.Div(
    [
        # 主存储
        dcc.Store(
            id={
                'type': 'callback-store',
                'index': 'main'
            }
        ),

        # 增操作存储
        dcc.Store(
            id={
                'type': 'callback-store',
                'index': 'insert'
            }
        ),

        # 删操作存储
        dcc.Store(
            id={
                'type': 'callback-store',
                'index': 'delete'
            }
        ),

        # 改操作存储
        dcc.Store(
            id={
                'type': 'callback-store',
                'index': 'alter'
            }
        ),
    ]
)

# 增、改操作modal层
modals = html.Div(
    [
        # 增操作modal
        fac.AntdModal(
            [
                fac.AntdForm(
                    [
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='insert-field1',
                                style={
                                    'width': '100%'
                                }
                            ),
                            label='字段1'
                        ),

                        fac.AntdFormItem(
                            fac.AntdInputNumber(
                                id='insert-field2',
                                style={
                                    'width': '100%'
                                }
                            ),
                            label='字段2'
                        ),

                        fac.AntdFormItem(
                            fac.AntdDatePicker(
                                id='insert-field3',
                                showTime=True,
                                style={
                                    'width': '100%'
                                }
                            ),
                            label='字段3'
                        )
                    ]
                )
            ],
            id={
                'type': 'modal',
                'index': 'insert'
            },
            title='新增记录',
            renderFooter=True,
            okClickClose=False,
            width=400
        ),

        # 改操作modal
        fac.AntdModal(
            [
                fac.AntdForm(
                    [
                        fac.AntdFormItem(
                            fac.AntdInput(
                                id='alter-field1',
                                style={
                                    'width': '100%'
                                },
                            ),
                            label='字段1'
                        ),

                        fac.AntdFormItem(
                            fac.AntdInputNumber(
                                id='alter-field2',
                                style={
                                    'width': '100%'
                                },
                            ),
                            label='字段2'
                        ),

                        fac.AntdFormItem(
                            fac.AntdDatePicker(
                                id='alter-field3',
                                style={
                                    'width': '100%'
                                },
                                showTime=True
                            ),
                            label='字段3'
                        )
                    ]
                )
            ],
            id={
                'type': 'modal',
                'index': 'alter'
            },
            title='修改记录',
            renderFooter=True,
            okClickClose=False,
            width=400
        )
    ]
)

# message容器层
messages = html.Div(
    [
        # 增操作message
        html.Div(
            id={
                'type': 'message-container',
                'index': 'insert'
            }
        ),

        # 改操作行选择检查message
        html.Div(
            id={
                'type': 'message-container',
                'index': 'alter-select'
            }
        ),

        # 改操作message
        html.Div(
            id={
                'type': 'message-container',
                'index': 'alter'
            }
        ),

        # 删操作message
        html.Div(
            id={
                'type': 'message-container',
                'index': 'delete'
            }
        )
    ]
)
